<template>
    <div class=con_store_main>
        <!--新增窗口-->
        <el-dialog title="新增服装" :visible.sync="addBox" width="50%" :close-on-click-modal="true" center>
            <div>
                <el-form :model="addForm" :rules="rules">
                    <el-form-item label="服装品牌" prop="brand">
                        <el-input maxlength="12" show-word-limit v-model="addForm.brand"
                            placeholder="输入服装品牌"></el-input>
                    </el-form-item>
                    <el-form-item label="服装简介" prop="clothesIntroduction">
                        <el-input maxlength="18" show-word-limit v-model="addForm.clothesIntroduction"
                            placeholder="输入服装简介"></el-input>
                    </el-form-item>

                    <el-form-item label="服装类别" prop="categoryId">
                        <el-select v-model="addForm.categoryId" placeholder="请选择服装类别">
                            <el-option v-for="item in options" :key="item.categoryId" :label="item.categoryDescription"
                                :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="size" label="请选择服装尺寸">
                        <el-select v-model="addForm.size" placeholder="请选择服装尺寸">
                            <el-option v-for="item in optionsSize" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服装编码" prop="code">
                        <el-input maxlength="6" show-word-limit v-model="addForm.code" placeholder="输入服装编码"></el-input>
                    </el-form-item>
                    <el-form-item label="服装面料" prop="material">
                        <el-input maxlength="8" show-word-limit v-model="addForm.material"
                            placeholder="输入服装面料 例:纯棉86% 聚酯纤维14%"></el-input>
                    </el-form-item>
                    <div>
                        <el-button plain @click="confirmAdd">確认添加</el-button>
                        <span class="noteSpan">默认添加库存为0 如有需求请前往服装管理校正库存</span>
                    </div>
                </el-form>
            </div>

        </el-dialog>
        <!--编辑窗口-->
        <el-dialog title="修改服装" :visible.sync="updateBox" width="50%" :close-on-click-modal="true" center>
            <div>
                <el-form :model="updateForm" :rules="rules">
                    <el-form-item label="服装品牌" prop="brand">
                        <el-input maxlength="12" show-word-limit v-model="updateForm.brand"
                            placeholder="输入服装品牌"></el-input>
                    </el-form-item>
                    <el-form-item label="服装简介" prop="clothesIntroduction">
                        <el-input maxlength="18" show-word-limit v-model="updateForm.clothesIntroduction"
                            placeholder="输入服装简介"></el-input>
                    </el-form-item>
                    <el-form-item label="服装类别" prop="categoryId">
                        <el-select v-model="updateForm.categoryId" placeholder="请选择服装类别">
                            <el-option v-for="item in options" :key="item.categoryId" :label="item.categoryDescription"
                                :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="size" label="请选择服装尺寸">
                        <el-select v-model="updateForm.size" placeholder="请选择服装尺寸">
                            <el-option v-for="item in optionsSize" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服装编码" prop="code">
                        <el-input maxlength="6" show-word-limit v-model="updateForm.code"
                            placeholder="输入服装编码"></el-input>
                    </el-form-item>
                    <el-form-item label="服装面料" prop="material">
                        <el-input maxlength="8" show-word-limit v-model="updateForm.material"
                            placeholder="输入服装面料 例:纯棉86% 聚酯纤维14%"></el-input>
                    </el-form-item>
                    <div>
                        <el-button plain @click="confirmUpdate">確認修改</el-button>
                        <span class="noteSpan">库存修改请前往服装管理校正库存</span>
                    </div>
                </el-form>
            </div>

        </el-dialog>
        <!--校正库存窗口-->
        <el-dialog title="校正库存" :visible.sync="correctBox" width="50%" :close-on-click-modal="true" center>
            <div>
                <el-form>
                    <el-form-item label="库存">
                        <el-input v-model="correctForm.inventory" placeholder="填写校正后的库存"></el-input>
                    </el-form-item>
                    <div>
                        <el-button plain @click="confirmCorrect">確認校正</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="服装品牌">
                <el-input maxlength="12" show-word-limit v-model="formInline.brand" placeholder="输入品牌进行查询……"></el-input>
            </el-form-item>
            <el-form-item label="服装编码">
                <el-input maxlength="6" show-word-limit v-model="formInline.code" placeholder="输入服装编码……"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="addClothes" type="primary" icon="el-icon-plus">新增</el-button>
            </el-form-item>
            <el-button style="margin-left: 150px;" @click="toggleIcon" :icon="currentIcon" circle></el-button>
        </el-form>
        <el-table class="table" :data="tableData" style="width: 100%" v-loading="loading"
            :default-sort="{ prop: 'index', order: 'descending' }">

            <el-table-column type="index" label="序号" sortable width="100">
            </el-table-column>
            <el-table-column prop="brand" label="服装品牌" width="100">
            </el-table-column>
            <el-table-column prop="categoryName" label="类别名称">
            </el-table-column>
            <el-table-column prop="note" label="note" width="80">
            </el-table-column>
            <el-table-column prop="size" label="尺寸" width="70">
            </el-table-column>
            <el-table-column prop="inventory" label="库存">
            </el-table-column>
            <el-table-column prop="clothesIntroduction" label="服装简介">
            </el-table-column>
            <el-table-column prop="material" label="服装材质">
            </el-table-column>
            <el-table-column prop="code" label="编码">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button style="margin-left: 4px;" type="text" size="small" @click="editClothes(scope.row)">
                        编辑</el-button>
                    <el-button type="text" size="small" @click="deleteClothes(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="correctInventory(scope.row)">校正库存</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin: auto;margin-top: 8px;" :hide-on-single-page="value"
            :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next"
            :total="this.total" @current-change="handleSizeChange">
        </el-pagination>
    </div>
</template>
<script>
import { request } from '@/network/request/request';
export default {
    mounted() {
        this.getCategory();
        this.findData();
    },
    data() {
        return {
            rules: {
                brand: [
                    { required: true, message: '请输入服装品牌', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                clothesIntroduction: [
                    { required: true, message: '请输入服装介绍', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                categoryId: [
                    { required: true, message: '请选择服装类别', trigger: 'change' }
                ],
                material: [
                    { required: true, message: '请输入服装的材质', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入服装的编码', trigger: 'blur' },
                    { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
                ],
                size: [
                    { required: true, message: '请选择服装尺寸', trigger: 'change' }
                ],
            },
            options: [],
            optionsSize: [
                {
                    value: 'S',
                    label: 'S'
                }, {
                    value: 'M',
                    label: 'M'
                }, {
                    value: 'L',
                    label: 'L'
                }, {
                    value: 'XL',
                    label: 'XL'
                }, {
                    value: 'XXL',
                    label: 'XXL'
                }, {
                    value: 'XXXL',
                    label: 'XXXL'
                },],
            formInline: {
                brand: '',
                code: '',
            },
            value: false,
            categoryFullyName: '',
            addForm: {
                brand: '',
                clothesIntroduction: '',
                size: '',
                code: '',
                material: '',
                categoryId: '',
                storeId: '',
            },
            updateForm: {
                brand: '',
                clothesIntroduction: '',
                size: '',
                code: '',
                material: '',
                categoryId: '',
                storeId: '',
            },
            correctForm: {
                inventory: null,
            },
            loading: false,
            addBox: false,
            updateBox: false,
            correctBox: false,
            currentPage: 1, // 当前页码  
            pageSize: 6, // 每页显示的记录数  
            total: 0, // 总个数  //默认设置 0
            tableData: [],
            // 初始图标  
            currentIcon: 'el-icon-refresh',
            // 用于防止在短时间内多次点击导致的多次计时器  
            timer: null,

        }
    },
    methods: {
        time() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        },
        deleteAlert(row) {
            this.$confirm('此操作将永久删除该服装, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest(row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        addClothes() {
            this.addBox = true;
        },
        handleSizeChange() {
            this.findData();
        },
        deleteClothes(row) {
            console.log(row);
            this.deleteAlert(row);
        },
        editClothes(row) {
            this.updateForm.clothesId = row.clothesId
            this.updateForm.brand = row.brand
            this.updateForm.clothesIntroduction = row.clothesIntroduction
            this.updateForm.size = row.size
            this.updateForm.code = row.code
            this.updateForm.material = row.material
            this.updateForm.categoryId = row.categoryName;
            this.updateBox = true;
        },
        async confirmAdd() {
            const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
            const config = {
                url: "api/user/clothes",
                method: "post",
                data: {
                    brand: this.addForm.brand,
                    clothesIntroduction: this.addForm.clothesIntroduction,
                    size: this.addForm.size,
                    code: this.addForm.code,
                    material: this.addForm.material,
                    categoryId: this.addForm.categoryId,
                    storeId: localStorage.getItem("storeId"),
                }
            }
            const res = await request(config);
            if (res.data.code == 1) {
                this.$message.success("添加成功");
                this.addBox = false;
            }
            this.findData();
        },
        async confirmUpdate() {
            const config = {
                url: "api/user/clothes",
                method: "put",
                data: {
                    clothesId: this.updateForm.clothesId,
                    brand: this.updateForm.brand,
                    clothesIntroduction: this.updateForm.clothesIntroduction,
                    size: this.updateForm.size,
                    code: this.updateForm.code,
                    material: this.updateForm.material,
                    categoryId: this.updateForm.categoryId,
                }
            }
            const res = await request(config);
            if (res.data.code == 1) {
                this.$message.success("修改成功");
                this.updateBox = false;
            }
            this.findData();
        },
        async findData() {
            const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
            this.time();
            const params = {
                currentPage: this.currentPage,/* 当前页码 */
                pageSize: this.pageSize,/* 页码大小 */
                storeId: localStorage.getItem("storeId"),
                brand: this.formInline.brand,/* 品牌 */
                code: this.formInline.code,/* 编码 */
            }
            const config = {
                url: "api/user/clothes",
                method: "get",
                params: params,
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.total = res.data.data.total;/* 得到数据的总数 */
                this.tableData = res.data.data.pageList;/* 得到数据 */
            }
        },
        deleteRequest(row) {
            console.log(row);
            if (row.inventory !== 0) {
                this.$message.error("库存不为0 不能删除")
            } else {
                let id = row.clothesId;
                const config = {
                    url: `api/user/clothes/${id}`,/* 通过路径参数 路径参数 */
                    method: "delete",
                }
                request(config).then((res) => {
                    if (res.data.code === 1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        this.findData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        });
                    }
                }).catch((error) => {
                    console.log(error);
                })
            }
        },
        async getCategory() {
            const config = {
                url: "api/user/category",
                method: "get",
            }
            const res = await request(config);

            if (res.data.code === 1) {
                this.options = res.data.data;
            }

        },
        correctInventory(row) {
            /* 数据回显 */
            this.updateForm.clothesId = row.clothesId;
            this.correctForm.inventory = row.inventory;
            this.correctBox = true;
        },
        confirmCorrect() {
            if (this.correctForm.inventory === null) {
                this.$message.error("请填写库存！")
            } else {
                const config = {
                    url: 'api/user/clothes',
                    method: "put",
                    data: {
                        clothesId: this.updateForm.clothesId,
                        inventory: this.correctForm.inventory,
                    }
                }
                request(config)
                    .then((res) => {
                        if (res.data.code === 1) {
                            this.$message.success("修改成功");
                            this.findData();
                            this.correctBox = false;
                        }
                    }).catch((error) => {
                        console.log(error);
                    })
            }

        },
        toggleIcon() {
            // 如果已经存在计时器，先清除它  
            if (this.timer) {
                clearTimeout(this.timer);
                this.$message.error("点击太快了，请稍后再试")
            }
            this.findData();
            // 立即设置新的图标（可选，取决于你的需求）  
            this.currentIcon = 'el-icon-loading'; // 或者其他你想要的图标  
            // 1秒后切换回原始图标  
            this.timer = setTimeout(() => {
                this.currentIcon = 'el-icon-refresh';
                // 清除计时器  
                this.timer = null;
            }, 400);
            this.findData();
        },

    }
}
</script>
<style scoped>
.con_store_main {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.noteSpan {
    color: rgb(122, 123, 125);
    margin-left: 6px;
    font-weight: bold;
}
</style>